<template>
    <canvas id="image-mix-canvas" :height="height" :width="width">
        请注意当前浏览器不支持Canvas
    </canvas>
</template>
<script>
import {defineComponent, toRaw} from 'vue';
import $ from 'jquery';
import {BackgroundItem, IconItem, PS, TextItem} from "./canvas";

export default /*#__PURE__*/defineComponent({
    name: 'VueImageMix', // vue component name
    props: {
        height: {
            type: [Number,String],
            default: 400
        },
        width: {
            type: [Number,String],
            default: 500
        },
    },
    data() {
        return {
            ps: null,
            canvasCssWidth: null,
            canvasCssHeight: null,
            canvasWScale: null,
            canvasHScale: null,
            prepareIcon: null
        };
    },
    methods: {
        init() {
            const canvas = document.getElementById('image-mix-canvas');
            this.canvasCssWidth = $(canvas).width();
            this.canvasCssHeight = $(canvas).height();
            this.canvasWScale = canvas.width / this.canvasCssWidth;
            this.canvasHScale = canvas.height / this.canvasCssHeight;
            this.ps = new PS(canvas);
        },
        drawBackgroundImage(img) {
            const item = new BackgroundItem(img, 0, 0, this.canvasCssWidth, this.canvasCssHeight);
            this.ps.setBackground(item);
            this.ps.render();
        },
        deleteBackgroundImage(){
            this.ps.removeBackground();
            this.ps.render();
        },
        drawIconImage(img) {
            const w = img.width;
            const h = img.height;
            let item = new IconItem(img, (this.canvasCssWidth - w) / 2, (this.canvasCssHeight - h) / 2, w, h);
            if (this.prepareIcon && !this.prepareIcon.active) {
                this.ps.removeModel(this.prepareIcon);
            }
            item.scaleMinWidth = w;
            item.scaleMinHeight = h;
            this.ps.addModel(item);
            this.ps.clickItem(item, w / 2, h / 2);
            this.prepareIcon = item;
            return item;
        },
        deleteIconImage(item){
            this.ps.removeModel(toRaw(item));
        },
        drawTextImage(img, data, selected) {
            let w = img.width / this.canvasWScale;
            let h = img.height / this.canvasHScale;
            const TEXT_FONT_SIZE = 45;
            let scale = 0;
            if (data.dir === 'h') {
                scale = TEXT_FONT_SIZE / h;
                h = TEXT_FONT_SIZE;
                w = scale * w;
            } else {
                scale = TEXT_FONT_SIZE / w;
                w = TEXT_FONT_SIZE;
                h = scale * h;
            }

            if (w > this.ps.getW() - TEXT_FONT_SIZE) {
                h = h * (this.ps.getW() - TEXT_FONT_SIZE) / w;
                w = this.ps.getW() - TEXT_FONT_SIZE;
            }
            if (h > this.ps.getH()) {
                w = w * (this.ps.getH() - TEXT_FONT_SIZE) / h;
                h = this.ps.getH() - TEXT_FONT_SIZE;
            }

            let item = new TextItem(img, (this.canvasCssWidth - w) / 2, (this.canvasCssHeight - h) / 2, w, h);
            item.data = data;
            item.scaleMinWidth = w;
            item.scaleMinHeight = h;
            this.ps.addModel(item);
            if (selected) {
                this.ps.clickItem(item, this.canvasCssWidth / 2, this.canvasCssHeight / 2);
            } else {
                this.ps.render();
            }
            return item;

        },
        exportImage(type){
            this.ps.modelsUnSelect();
            this.prepareIcon = null;
            return document.getElementById('image-mix-canvas').toDataURL(type);
        }
    },
});
</script>

<style>
#image-mix-canvas {
    border: 1px solid black;
    margin: auto;
}
</style>
